<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.min.js"></script>
    <!-- 引入样式 组件库-->
    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">
    <script src="../../element-ui/lib/index.js"></script>
    <script type="text/javascript">
        // 继承的子组件通过this.$parent可以更改父组件的data，不推荐直接修改父组件的内容
        // 使用extend的好处是，使用一个拥有多个配置项的组件，通过继承，将不常用到的参数设置默认
        var component = Vue.extend({
            data: function () {
                return {name1: 'component'}
            },
            mounted: function () {
                console.log("component1 mounted");
            },
        });
    </script>
</head>
<body>
<div id="app">
    root
    {{name1}}
    {{name2}}
    {{name3}}
</div>
</body>
<script>
    var component2 = Vue.extend({
        extends: component,
        data: function () {
            return {name2: 'component2'}
        },
        mounted: function () {
            console.log("component2 mounted");
        },
    });
    new component2({
        name: "Root",
        el: "#app",
        data: function () {
            return {name3: 'Root'}
        }
    })
</script>
</html>
